<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Kahoot: Нефть</title>
<style>
body {
    font-family: Arial;
    background: linear-gradient(135deg,#141e30,#243b55);
    color:white;
    text-align:center;
}
.container {
    max-width:700px;
    margin:auto;
    padding:20px;
}
button {
    width:100%;
    padding:12px;
    margin:8px 0;
    border:none;
    border-radius:10px;
    font-size:16px;
    cursor:pointer;
}
.correct{background:green;}
.wrong{background:red;}
#timer{font-size:24px;margin:10px;}
#leaderboard{margin-top:20px;}
</style>
</head>
<body>

<div class="container">
<h1>🧪 Kahoot: Нефть</h1>

<div id="startScreen">
<input id="playerName" placeholder="Введите имя">
<button onclick="startGame()">Начать</button>
</div>

<div id="game" style="display:none;">
<div id="timer">⏱ 15</div>
<h2 id="question"></h2>
<div id="answers"></div>
</div>

<div id="result" style="display:none;"></div>
<div id="leaderboard"></div>

<audio id="correctSound" src="https://actions.google.com/sounds/v1/cartoon/clang_and_wobble.ogg"></audio>
<audio id="wrongSound" src="https://actions.google.com/sounds/v1/cartoon/boing.ogg"></audio>

</div>

<script>
const quiz=[
{q:"Что такое нефть?",a:["Смесь углеводородов","Минерал","Газ","Металл"],c:0},
{q:"Основной элемент?",a:["O","C","N","S"],c:1},
{q:"Процесс разделения нефти",a:["Фильтрация","Перегонка","Кристаллизация","Сжигание"],c:1},
{q:"Продукт нефти",a:["Сахар","Бензин","Соль","Вода"],c:1},
{q:"Основной газ",a:["Метан","Кислород","Азот","Водород"],c:0},
{q:"Образование нефти",a:["Разложение организмов","Испарение","Горение","Охлаждение"],c:0}
];

let current=0;
let score=0;
let timer;
let timeLeft=15;
let player="";
let leaderboard=JSON.parse(localStorage.getItem("leaders")||"[]");

function startGame(){
player=document.getElementById("playerName").value||"Игрок";
document.getElementById("startScreen").style.display="none";
document.getElementById("game").style.display="block";
loadQ();
}

function loadQ(){
resetTimer();
const q=quiz[current];
document.getElementById("question").innerText=q.q;
const ansDiv=document.getElementById("answers");
ansDiv.innerHTML="";
q.a.forEach((ans,i)=>{
let btn=document.createElement("button");
btn.innerText=ans;
btn.onclick=()=>check(i,btn);
ansDiv.appendChild(btn);
});
}

function check(i,btn){
clearInterval(timer);
const correct=quiz[current].c;
const buttons=document.querySelectorAll("#answers button");
buttons.forEach((b,index)=>{
b.disabled=true;
if(index===correct)b.classList.add("correct");
if(index===i && i!==correct)b.classList.add("wrong");
});

if(i===correct){
score++;
document.getElementById("correctSound").play();
}else{
document.getElementById("wrongSound").play();
}

setTimeout(next,1500);
}

function next(){
current++;
if(current<quiz.length){
loadQ();
}else finish();
}

function resetTimer(){
timeLeft=15;
document.getElementById("timer").innerText="⏱ "+timeLeft;
timer=setInterval(()=>{
timeLeft--;
document.getElementById("timer").innerText="⏱ "+timeLeft;
if(timeLeft<=0){
clearInterval(timer);
next();
}
},1000);
}

function finish(){
document.getElementById("game").style.display="none";
document.getElementById("result").style.display="block";
document.getElementById("result").innerHTML=`<h2>${player}, результат: ${score}/6</h2>`;

leaderboard.push({name:player,score});
leaderboard.sort((a,b)=>b.score-a.score);
leaderboard=leaderboard.slice(0,5);
localStorage.setItem("leaders",JSON.stringify(leaderboard));

showLeaders();
}

function showLeaders(){
let html="<h3>🏆 Рейтинг</h3>";
leaderboard.forEach(l=>{
html+=`<p>${l.name} — ${l.score}</p>`;
});
document.getElementById("leaderboard").innerHTML=html;
}

showLeaders();
</script>

</body>
</html>